<template>
  <div>
    <SimilarTaskItemTableDialog ref="similarTaskItemTableDialog"
                                :containsSimilarTaskItemList="containsSimilarTaskItemList"
                                :knowledgeLibId='knowledgeLibId'
                                @quit="quit" @update="update" @create="create" @close="closeSimilarTaskTableDialog"/>
    <el-row class="bottom-space">
      <el-col :span="7">
        <div class="round-corner-border wrapper grey-border">
          <div class="bottom-space">
            <el-button size="small" type="primary" @click="download">下载子任务模板</el-button>
          </div>
          <div>
            请按照数据模版的格式准备导入数据，模版中表头名称不可更改，表头行不能删除。
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="round-corner-border wrapper grey-border">
          <div class="bottom-space">
            <el-upload :multiple="false" accept=".xlsx"
                       :on-success="updateSubTaskTable"
                       :on-error="handleUploadError"
                       :show-file-list="false"
                       action="/pmph/action/task/parseSubTaskTemplate">
              <el-button size="small" type="primary">导入子任务模板</el-button>
            </el-upload>
          </div>
          <div>
            请按照数据模版的格式导入数据，单次导入的数据不超过1000条。
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="position: absolute; bottom: 0px; right: 0px; ">
        <el-button size="small" type="primary" :disabled="subTaskData.length == 0"
                   @click.prevent="selectSimilarTaskItemList">对比现有子任务
        </el-button>
        <el-button size="small" type="primary" :disabled="containsSimilarTaskItemList.length == 0"
                   @click.prevent="$refs.similarTaskItemTableDialog.visible = true">处理相似子任务
        </el-button>
      </el-col>
    </el-row>
    <el-row class="bottom-space">
      <el-col :span="24">
        <el-table highlight-current-row :data="subTaskData" border style="width: 100%" :height="tableHeight">
          <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="子任务名称" prop="name">
            <template slot-scope="scope">
              <span v-html="scope.row.name"></span>
              <!--              <KindEditor :content.sync="scope.row.name" editor-type="Input"/>-->
              <!--              <el-input v-model="scope.row.name"></el-input>-->
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="50">
            <template slot-scope="scope">
              <el-link @click="deleteSubTask(scope.$index)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import SimilarTaskItemTableDialog from "../SimilarTaskItemTableDialog";

export default {
  name: "SubTask",
  components: {SimilarTaskItemTableDialog},
  props: {
    value: Array,
    knowledgeLibId: String,
  },
  data() {
    return {
      subTaskData: [],
      containsSimilarTaskItemList: [],
      tableHeight: 0
    }
  },
  methods: {
    quit(taskItemWithSimilarList) {
      this.containsSimilarTaskItemList.remove(taskItemWithSimilarList)
    },
    create(taskItemWithSimilarList) {
      this.containsSimilarTaskItemList.remove(taskItemWithSimilarList)
      let subTask = this.createSubTask()
      subTask.name = taskItemWithSimilarList.name
      subTask.remark = taskItemWithSimilarList.remark
      this.subTaskData.push(subTask)
      this.$emit("input", this.subTaskData)
    },
    update(taskItemWithSimilarList, similarTaskItem) {
      this.containsSimilarTaskItemList.remove(taskItemWithSimilarList)
      let subTask = this.createSubTask()
      subTask.name = similarTaskItem.name
      subTask.knowledgeId = similarTaskItem.knowledgeId
      subTask.type = CONST.TASK_ITEM.TYPE_EDIT
      subTask.wordsCount = similarTaskItem.wordsCount
      subTask.remark = taskItemWithSimilarList.remark
      this.subTaskData.push(subTask)
      this.$emit("input", this.subTaskData)
    },
    download() {
      window.location.href = '/pmph/action/task/downLoadSubTaskTemplate'
    },
    updateSubTaskTable(response) {
      if (response === undefined) {
        this.$message.error("导入失败");
        return
      }
      for (let taskItem of response) {
        let subTask = this.createSubTask()
        subTask.name = taskItem.name
        subTask.remark = taskItem.remark
        this.subTaskData.push(subTask)
      }
      this.$message.success("成功导入" + this.subTaskData.length + "条");
      this.$emit("input", this.subTaskData);
    },
    selectSimilarTaskItemList() {
      let param = new URLSearchParams();
      param.append("taskItemList", JSON.stringify(this.subTaskData))
      param.append("knowledgeLibId", this.knowledgeLibId)
      this.axios.post('/pmph/action/task/selectSimilarTaskItemList', param)
        .then((response) => {
          this.subTaskData = []
          for (let taskItem of response.data) {
            if (taskItem.similarTaskItemList.length > 0) {
              this.containsSimilarTaskItemList.push(taskItem)
            } else {
              let subTask = this.createSubTask()
              subTask.name = taskItem.name
              subTask.remark = taskItem.remark
              this.subTaskData.push(subTask)
            }
          }
          if (this.containsSimilarTaskItemList.length > 0) {
            this.$refs.similarTaskItemTableDialog.visible = true
          } else {
            this.$message.success("没有相似子任务, 无需处理")
          }
        })
    },
    createSubTask() {
      return {
        taskId: "",
        knowledgeId: "",
        name: "",
        type: 0,
        editor: "",
        wordsCount: 0,
        firstAuditor: "",
        secondAuditor: "",
        thirdAuditor: "",
        status: 0,
        remark: ""
      }
    },
    deleteSubTask(index) {
      this.subTaskData.splice(index, 1)
      this.$emit("input", this.subTaskData)
    },
    closeSimilarTaskTableDialog() {
      // this.containsSimilarTaskItemList = []
    },
    handleUploadError() {
      this.$message.error("upload error")
    }
  },
  created() {
    this.subTaskData = this.value
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 280
  }
}
</script>

<style scoped>
.round-corner-border {
  border-radius: 4px;
}

.wrapper {
  height: 100px;
  border: 1px solid;
  padding: 10px;
  box-sizing: border-box;
  margin-right: 10px;
}

.grey-border {
  border-color: #C9C9C9;
}

.bottom-space {
  margin-bottom: 10px;
}
</style>
